<template>
    <div class="order-list-view">
        <div class="page-header">
            <h1>我的订单</h1>
            <p>查看您的历史订单</p>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <LoadingSpinner />
        </div>

        <!-- 空状态 -->
        <div v-else-if="!orders.length" class="empty-container">
            <EmptyState title="暂无订单" description="您还没有任何订单记录" :icon="Document" />
        </div>

        <!-- 订单列表 -->
        <div v-else class="order-list-container">
            <el-card v-for="order in orders" :key="order.id" class="order-card">
                <div class="order-card-header">
                    <span class="order-number">订单号: {{ order.orderNo }}</span>
                    <span class="order-date">{{ new Date(order.createdTime).toLocaleString() }}</span>
                    <el-tag :type="getOrderStatusType(order.status)" size="small">{{ getOrderStatusText(order.status) }}</el-tag>
                </div>
                <div class="order-card-body">
                    <div v-for="item in order.items" :key="item.productId" class="order-item">
                        <img :src="item.productImageUrl" :alt="item.productName" class="item-image" />
                        <div class="item-info">
                            <p class="item-name">{{ item.productName }}</p>
                            <p class="item-points">{{ item.points }} 积分 x {{ item.quantity }}</p>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <span class="total-points">总计: {{ order.totalPoints }} 积分</span>
                    <el-button type="primary" size="small" @click="viewOrderDetail(order.id)">查看详情</el-button>
                </div>
            </el-card>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    v-model:current-page="currentPage" @current-change="handlePageChange" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getAdminOrderList } from '@/api/modules/order'
import type { Order } from '@/types'
import { useUserStore } from '@/stores/user'
import LoadingSpinner from '@/components/base/LoadingSpinner.vue'
import EmptyState from '@/components/base/EmptyState.vue'
import { Document } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const orders = ref<Order[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 加载订单数据
const loadOrders = async (page: number) => {
    try {
        loading.value = true
        const response = await getAdminOrderList({ page, size: pageSize.value, userId: userStore.user?.id })
        orders.value = response.list
        total.value = response.total
    } catch (error) {
        console.error('获取订单列表失败:', error)
    } finally {
        loading.value = false
    }
}

// 获取订单状态文本
const getOrderStatusText = (status: string) => {
    switch (status) {
        case 'pending': return '待支付'
        case 'paid': return '已支付'
        case 'shipped': return '已发货'
        case 'completed': return '已完成'
        case 'cancelled': return '已取消'
        default: return '未知状态'
    }
}

// 获取订单状态标签类型
const getOrderStatusType = (status: string) => {
    switch (status) {
        case 'pending': return 'warning'
        case 'paid': return 'primary'
        case 'shipped': return 'info'
        case 'completed': return 'success'
        case 'cancelled': return 'danger'
        default: return 'info'
    }
}

// 处理分页变化
const handlePageChange = (page: number) => {
    currentPage.value = page
    router.push({ query: { page } })
}

// 查看订单详情
const viewOrderDetail = (orderId: number) => {
    router.push(`/order/${orderId}`)
}

// 监听路由变化
watch(
    () => route.query.page,
    (newPage) => {
        const page = Number(newPage) || 1
        currentPage.value = page
        loadOrders(page)
    },
    { immediate: true }
)

// 组件挂载时加载数据
onMounted(() => {
    const page = Number(route.query.page) || 1
    currentPage.value = page
    loadOrders(page)
})
</script>

<style scoped>
.order-list-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-header h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 600;
}

.page-header p {
    color: #666;
    font-size: 16px;
}

.loading-container,
.empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.order-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-card {
    border-radius: 8px;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ebeef5;
}

.order-number {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.order-date {
    font-size: 14px;
    color: #666;
}

.order-card-body {
    padding: 20px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.order-item:last-child {
    margin-bottom: 0;
}

.item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.item-info {
    flex: 1;
}

.item-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

.item-points {
    font-size: 12px;
    color: #666;
}

.order-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
}

.total-points {
    font-size: 16px;
    font-weight: 600;
    color: #e6a23c;
    margin-right: 20px;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
</style>
